<template>
  <div class="transaction-details_mod" :class="themeClass">
    <v-nav :title="$t('Hzjl.Transfer record')"></v-nav>

    <div class="transaction-details_mod_box">
      <div class="recharge-details_mod_box_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <ul>
            <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
              <li v-for="(item, index) in transactionDetailsList" :key="index">
                <div class="van-cell__title">
                  <span v-if="item.from_type == 0">
                    {{ $t('Hzjl.Capital account') }}
                    <font style="font-family: tahoma, arial">-></font>
                    <span v-if="item.reach_type == 1">{{ $t('Hzjl.transaction account') }}</span>
                  </span>
                  <span v-if="item.from_type == 1">
                    {{ $t('Hzjl.transaction account') }}
                    <font style="font-family: tahoma, arial">-></font>
                    <span v-if="item.reach_type == 0">{{ $t('Hzjl.Capital account') }}</span>
                  </span>
                  <div class="van-cell__label">{{ item.create_time }}</div>
                </div>
                <div class="van-cell__value">
                  <span style="color: #ee0a24">{{ item.amount }}</span>
                  <div class="van-cell__label">{{ item.currency }}</div>
                </div>
              </li>
            </van-list>
          </ul>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TransactionDetails',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      transactionDetailsList: [],
      isDayTime: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    async getTransferList() {
      await this.$https.get('/wallet/transferList?page=' + this.page).then(res => {
        if (this.refreshing) {
          this.transactionDetailsList = []
          this.refreshing = false
        }
        this.transactionDetailsList = [...this.transactionDetailsList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    // 上拉加载处理函数
    onLoad() {
      this.getTransferList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
